<template>
	<div class="login">
		<div class="leftbg">
			<img src="../assets/img/loginleft.gif" class="leftlogoimg">
		</div>
		<div class="rightbg">
			<div class="name">
				<Input v-model="username" icon="ios-person" placeholder="用户名" />
			</div>
			<div class="pwd">
				<Input v-model="passwd" icon="ios-lock-outline" placeholder="密码" type="password" />
			</div>
			<Button type="success" long :loading="loading2" icon="ios-power" @click="toLoading2" class="btn">
				<span v-if="!loading2">登录</span>
				<span v-else>登录中...</span>
			</Button>
		</div>
	</div>
</template>

<script>
	export default {
		name: "login",
		data() {
			return {
				username:'',
				passwd:'',
				loading2: false
			}
		},
		mounted() {
		},
		computed: {},
		watch: {},
		components: {},
		methods: {
			toLoading2 () {
				this.loading2 = true;
				let self = this;
				setTimeout(function () {
					self.$router.push("/home")
				},1000)
			}
		},
		props: []
	}
</script>

<style scoped lang="less">
@basiccolor:#1C9AB1;
@height:30vh;
	.login{
		background: url("../assets/img/loginbg.png") no-repeat;
		background-size: 100% 100%;
		overflow: auto;
		width: 100vw;
		height: 100vh;

		.leftbg,.rightbg{
			display: inline-block;
		}
		.leftbg{
			width: 25vw;
			height: 20vw;
			transform: translate(-12vw,26vh);
			.leftlogoimg{
				background-size: contain;
				width: 25vw;
				height: 20vw;
			}
		}
		.rightbg{
			background: url("../assets/img/loginform.png") no-repeat;
			background-size: 100% 100%;
			width: 25vw;
			height: 20vw;
			transform: translate(50vw,-8vh);
			box-sizing: border-box;
			padding: 3vw 1vw;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-items: center;
			flex-basis: 0;
			.name{
				box-sizing: border-box!important;
				margin: 2vh 1vw;
				width: 80%;
				height: 4vh;
				display: flex;
				align-items: center;
			}
			.pwd{
				box-sizing: border-box!important;
				margin: 2vh 1vw;
				width: 80%;
				height: 4vh;
				display: flex;
				align-items: center;
			}
			.btn{
				box-sizing: border-box!important;
				margin: 4vh 1vw;
				width: 80%;
				height: 4vh;
				background: #A1DBF7 !important;
				color: black;
			}
		}
	}


</style>